/**
 * @class ExtGames.Deck
 * @param {Array} cards An array of cards to initialise the deck with
 * Represents the deck of all non-dealt cards
 */
ExtGames.UnusedDeck = function(config) {
  var config = config || {};
  
  ExtGames.UnusedDeck.superclass.constructor.call(this, config);
                
  this.on('afterlayout', this.applyClasses, this);
};

Ext.extend(ExtGames.UnusedDeck, ExtGames.CardHolder, {
  
  /**
   * @property numberToDeal
   * @type Number
   * The number of cards to deal each time the deck is clicked (usually 1 or 3, defaults to 1)
   */
  numberToDeal: 1,
  
  /**
   * Renders the Deck
   * @param {Ext.Container} ct The container to render this component to
   */
  onRender: function(ct, position) {
	    this.el = Ext.get(ct).createChild({
	      cls: 'x-solitaire-deck-wrapper',
	      children: [{
			tag: 'h1',
			html: 'Deck'
			}, {
	        cls:   'x-solitaire-unuseddeck'
	        //style: 'background: url('+cardUrl+') no-repeat bottom right;'
	      }]
	    });
	    
	    this.deckHolder = this.el.child('.x-solitaire-unuseddeck');
	    
	    ExtGames.UnusedDeck.superclass.onRender.apply(this, arguments);
	  },
  
  getLayoutTarget: function(paramName) {
    return this.deckHolder;
  },
  
  /**
   * Iterates over the cards in the deck, adding CSS classes accordingly.
   * Intended to be attached to the afterlayout event
   */
  applyClasses: function() {
  	  	
    this.items.each(function(c) {
    	
      
      if (c == this.items.items[this.items.length - 1]) {
        //top card in stack
        c.addClass('x-solitaire-unused-top');
        c.removeClass('x-solitaire-unused-under');
      } else {
        c.addClass('x-solitaire-unused-under');
        c.removeClass('x-solitaire-unused-top');
      };
      
      //c.getEl().setStyle('background-position', 'bottom right');
      
      c.initializeDragSource();
    }, this);
  },
  
  
});